import React, { forwardRef, useImperativeHandle } from 'react';
import { t } from 'i18next';
import { Tabs, Input, Card, Checkbox, Space } from 'antd';
import { MessageInstance } from 'antd/es/message/interface';
import { useFileList } from '../hooks/useFileList';
import DownloadConfig from './downloadConfig';
import ReverseSyncConfig from './reverseSyncConfig';
import { useConfigState } from '../hooks/useConfigState';
const { Search } = Input;
interface FileListProps {
	messageApi: MessageInstance;
}
interface RefType {
	getFileContent: () => void;
}
const FileList = forwardRef<RefType, FileListProps>(({ messageApi }, ref) => {
	const {
		serviceName,
		tabsData,
		checkedList,
		checkAll,
		indeterminate,
		allPathList,
		handleSearch,
		handleCheckAllChange,
		handleChangeFile,
		getFileContent
	} = useFileList();
	const { activeTab } = useConfigState();
	useImperativeHandle(ref, () => ({
		getFileContent
	}));
	return (
		<Card
			title={
				<div className="flex items-center">
					<img src={`/service_logo/${serviceName.toLowerCase()}.svg`} width="16" height="16" />
					<span className="pl-[5px]">{serviceName}</span>
				</div>
			}
			className="w-[100%]"
		>
			<Space className="mb-2">
				<DownloadConfig buttonText={'批量下载'} fileList={checkedList.join(',')} />
				<DownloadConfig buttonText={'下载全部'} fileList={allPathList.join(',')} />
				<ReverseSyncConfig messageApi={messageApi} callback={getFileContent} />
			</Space>
			<Search
				placeholder={t('inputFileName')}
				allowClear
				className="mb-[20px] w-[100%]"
				onSearch={value => handleSearch(value)}
				onChange={e => handleSearch(e.target.value)}
			/>
			<Checkbox className="ml-4" indeterminate={indeterminate} onChange={handleCheckAllChange} checked={checkAll}>
				全选
			</Checkbox>
			<Tabs
				className="h-[500px]"
				tabBarStyle={{ width: '100%' }}
				tabPosition="left"
				items={tabsData}
				activeKey={activeTab}
				onChange={activeKey => {
					handleChangeFile(activeKey);
				}}
			/>
		</Card>
	);
});
export default FileList;
